<template>
  <a-row justify="space-between">
    <card class="insure-card" title="年检记录" :showDivider="false">
      <template #title>
        <span>年检记录</span>
        <a-button
          v-if="showAddBtn"
          icon="plus"
          v-permission="'svms:asstes:car:car-model.detail.inspectRecord.add'"
          type="primary"
          class="ml-3"
          @click="addInspectFn"
        >
          <template #icon>
            <icon-plus />
          </template>
          新增年检</a-button
        >
      </template>
    </card>
    <div style="width: 500px">
      <list-searcher columns="1" v-if="!inLongOrder" :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    </div>
  </a-row>
  <a-divider style="margin: 0 0 20px" v-if="!inLongOrder" />

  <table-index :table="table" @loadData="loadData">
    <template #inspectionFileId="{ record }">
      <img-link :value="record.inspectionFileId" title="查看年检证" />
    </template>
    <template #inspectionAmount="{ record }">
      <unit-value :value="record.inspectionAmount" />
      <div class="inspectionStatus" :class="{ payed: record.assetFeeStatus == 1 }">{{ record.assetFeeStatusName }}</div>
    </template>
  </table-index>
  <!-- 新增 -->
  <Modals.CarInspectFormModal ref="formModalRef" @ok="loadData" />
  <!-- 详情 -->
  <Modals.CarInspectDetailModal ref="detailModalRef" />
  <!-- 结算 -->
  <Modals.SettlementModal ref="settlementModalRef" @ok="loadData" />
  <!-- 操作记录 -->
  <OperateLogModal ref="operateLogModalRef" type="4" />
</template>
<script setup>
  import { ref, reactive, onMounted, computed } from 'vue'
  import { useRoute } from 'vue-router'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { Modal, Message } from '@arco-design/web-vue'
  import { getCarInspectList, deleteInspect } from '@/api/asset/carInspect'
  import { usePageDict } from '@/hooks/useDict'
  import Modals from './compoents/modals'

  const props = defineProps({
    // 是否长租订单，不展示操作和搜索
    inLongOrder: Boolean,
    carInfo: Object,
    defaultParam: {
      type: Object,
      default: () => {
        return {}
      },
    },
  })

  const carManageDict = usePageDict('carManageDict')
  const detailModalRef = ref()
  const formModalRef = ref()
  const operateLogModalRef = ref()
  const settlementModalRef = ref()

  const queryParam = reactive({
    ...props.defaultParam,
  })
  const route = useRoute()

  const searchList = computed(() => {
    return [
      {
        label: '费用状态',
        prop: 'feeStatus',
        type: 'a-select',
        options: carManageDict.feeStatusEnum,
      },
    ]
  })

  const table = useTable({
    queryParam,
    columns: [
      {
        title: '年检有效期至',
        dataIndex: 'planTime',
        width: 150,
        render: (record) => {
          return record.planTime ? record.planTime.split(' ')[0] : ''
        },
      },
      { title: '年检证', dataIndex: 'inspectionFileId', slotName: 'inspectionFileId', width: 110 },
      { title: '年检单关联门店', dataIndex: 'siteName', width: 150 },
      {
        title: '本次年检日期',
        dataIndex: 'inspectionTime',
        width: 150,
        render: (record) => {
          return record.inspectionTime ? record.inspectionTime.split(' ')[0] : ''
        },
      },
      { title: '年检厂', dataIndex: 'location', width: 190 },
      {
        title: '收支类型',
        dataIndex: 'costType',
        width: 110,
        render: () => {
          return '付款'
        },
      },
      { title: '年检费', unit: '元', dataIndex: 'inspectionAmount', slotName: 'inspectionAmount', width: 110 },
      { title: '负责人', dataIndex: 'undertaker', width: 110 },
      { title: '年检单号', dataIndex: 'inspectionNo', width: 180 },
    ],
    operates: props.inLongOrder
      ? undefined
      : [
          {
            label: '详情',
            permission: 'svms:asstes:car:car-model.detail.inspectRecord.detail',
            method: (record) => {
              detailModalRef.value.open(record)
            },
          },
          {
            label: '编辑',
            permission: 'svms:asstes:car:car-model.detail.inspectRecord.edit',
            method: (record) => {
              formModalRef.value.open({ id: record.id, page: 'carDetail', mode: 'edit' })
            },
          },
          {
            label: '结算',
            permission: 'svms:asstes:car:car-model.detail.inspectRecord.settlement',
            show: (record) => {
              // 0未付款,1已付款,5已驳回
              return [0, 5].includes(record.assetFeeStatus)
            },
            method: (record) => {
              settlementModalRef.value.show([record.assetFeeId])
            },
          },
          {
            label: '操作记录',
            permission: 'svms:asstes:car:car-model.detail.inspectRecord.operateLog',
            method: (record) => {
              operateLogModalRef.value.open(record.id)
            },
          },
          {
            label: '删除',
            permission: 'svms:asstes:car:car-model.detail.inspectRecord.delete',
            method: (record) => {
              Modal.confirm({
                title: '提示',
                cancelText: '取消',
                okText: '确认',
                bodyStyle: {
                  'text-align': 'center',
                },
                content: '请再次确认是否删除年检记录？',
                onBeforeOk: async () => {
                  await deleteInspect({ id: record.id })
                  Message.success('删除成功')
                  loadData()
                  return true
                },
              })
            },
          },
        ],
  })

  const addInspectFn = () => {
    formModalRef.value.open({ carId: props.carInfo.id, page: 'carDetail' })
  }

  const loadData = useFetchTableDataApi(table, queryParam, getCarInspectList)
  const showAddBtn = ref(false)
  onMounted(() => {
    const from = route.query.from
    const disabledCar = from === 'car-return' || from === 'car-disposal'
    showAddBtn.value = !disabledCar && !props.inLongOrder

    if (route.params) {
      if (!props.inLongOrder) {
        queryParam.carId = route.params.id
      }
      loadData()
    }
  })
</script>
<style scoped lang="less">
  .inspectionStatus {
    color: #f53f3f;
    &.payed {
      color: #00b42a;
    }
  }

  :deep(.custom-divider) {
    display: none;
  }

  :deep(.form-item-content) {
    width: 100% !important;
  }
</style>
